<!DOCTYPE html>
<html style="height: 100%" lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">

	<div id="main" style="height: 100%"></div>
	<!-- 引入jquery -->
	<script type="text/javascript"
		th:src="@{/ajax/libs/jquery/3.5.0/dist/jquery.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/ajax/libs/echarts/5.0.1/dist/echarts.min.js}"></script>
	<script type="text/javascript">
		var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

		var chartDom = document.getElementById('main');
		var myChart = echarts.init(chartDom);
		var option;

		myChart.showLoading();
		$.getJSON(ROOT_PATH + '/data/asset/data/les-miserables.json', function(
				graph) {
			myChart.hideLoading();

			graph.nodes.forEach(function(node) {
				node.label = {
					show : node.symbolSize > 30
				};
			});

			option = {
				title : {
					text : 'Les Miserables',
					subtext : 'Circular layout',
					top : 'bottom',
					left : 'right'
				},
				tooltip : {},
				legend : [ {
					data : graph.categories.map(function(a) {
						return a.name;
					})
				} ],
				animationDurationUpdate : 1500,
				animationEasingUpdate : 'quinticInOut',
				series : [ {
					name : 'Les Miserables',
					type : 'graph',
					layout : 'circular',
					circular : {
						rotateLabel : true
					},
					data : graph.nodes,
					links : graph.links,
					categories : graph.categories,
					roam : true,
					label : {
						position : 'right',
						formatter : '{b}'
					},
					lineStyle : {
						color : 'source',
						curveness : 0.3
					}
				} ]
			};

			myChart.setOption(option);
		});

		option && myChart.setOption(option);
	</script>
</body>
</html>